<!DOCTYPE html>
<html>
<head>

		<script src="../../static/jquery/jquery.min.js" th:src="@{/static/jquery/jquery-2.0.3.min.js}"></script>
		<link href="../../static/bootstrap/css/bootstrap.min.css" th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
		<script src="../../static/bootstrap/js/bootstrap.min.js" th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
		<link href="../../static/font-awesome/css/font-awesome.min.css" th:href="@{/static/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />			

		<link href="../../static/jquery/jquery-ui.css" th:href="@{/static/jquery/jquery-ui.css}" rel="stylesheet" />
		<script src="../../static/jquery/jquery-ui.js" th:src="@{/static/jquery/jquery-ui.js}"></script>
		
		<link href="../../static/custom/datepicker.css" th:href="@{/static/custom/datepicker.css}" rel="stylesheet" />	

		<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" th:href="@{'http://fonts.googleapis.com/css?family=Open+Sans:400,300'}" rel="stylesheet" />		

		<link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-rtl.min.css" th:href="@{/static/custom/ace-rtl.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-skins.min.css" th:href="@{/static/custom/ace-skins.min.css}" rel="stylesheet" />

		<script src="../../static/custom/ace-extra.min.js" th:src="@{/static/custom/ace-extra.min.js}"></script>
		
</head>
<body tiles:fragment="content">

														<div class="widget-header widget-header-small">
															<h4>
																Plan de Pago
															</h4>
														</div>

														<div class="widget-body">
															<div class="widget-main">
																<form class="form-horizontal" role="form">
																	<div class="form-group">
																	    <label class="col-sm-1 control-label small center" >Fecha de Aplicaci&oacute;n</label>
																	    <div class="col-sm-2">
																	      <h4 class="green" th:text="${#dates.format(fechaAplicacion, #messages.msg('date.format'))}">10/10/13</h4>
																	    </div>
																	    <label class="col-sm-1 control-label  small center">Calificaci&oacute;n</label>
																	    <div class="col-sm-2">
																	      <h4 class="blue" th:text="${cliente != null and cliente.categoriaCliente != null}? ${cliente.categoriaCliente.descripcion}">NORMAL</h4>
																	    </div>
																	    <label class="col-sm-1 control-label  small center">Fecha Calificaci&oacute;n</label>
																	    <div class="col-sm-2">
																	      <h5 class="gray" th:text="${cliente != null and fecha != null}? ${#dates.format(fecha, #messages.msg('date.format'))}">10/10/13</h5>
																	    </div>
																	    <label class="col-sm-1 control-label  small center">Tipo de Consulta</label>
																	    <div class="col-sm-2">
																	      <h5 class="gray" th:text="${diConsultas}">Consultas</h5>
																	    </div>
																	</div>
																</form>
																<div class="row">
																	<div class="col-xs-7" >
																	<div class="space"></div>					
																		<div th:id="${'campoTabla-planPagos' + credito.nroCredito}" class="table-responsive" th:each="credito : ${listaCreditos}" style="display: none;">
																			<table id="tabla-planPagos" class="table table-bordered table-hover table-fixed-header">
																			<thead>
																				<tr>
																					<th>Cuota</th>
																					<th>Fecha Cuota</th>
																					<th>Intereses</th>
																					<th>Principal</th>
																					<th>Mora</th>
																					<th>Monto Cuota</th>
																				</tr>																					
																			</thead>								
																			<tbody>
																				<tr th:each="planPago : ${credito.planPagos}">
																					<td th:text="${planPago.nroCuota}">55</td>
																					<td th:text="${#dates.format(planPago.fechaTeorica, #messages.msg('date.format'))}">30/11/2013</td>
																					<td th:text="${#numbers.formatDecimal(planPago.saldoIntereses, 2, 2, 'POINT')}">0.00</td>
																					<td th:text="${#numbers.formatDecimal(planPago.saldoPrincipal, 2, 2, 'POINT')}" >11.16</td>
																					<td th:text="${#numbers.formatDecimal(planPago.mora, 2, 2, 'POINT')}">0.03</td>
																					<td th:text="${#numbers.formatDecimal(planPago.totalCuota, 2, 2, 'POINT')}">11.19</td>																						
																				</tr>
																				<tr th:if="${credito.planPagos.isEmpty()}">
																	                <td colspan="5">No se encontraron registros de planes de pago</td>
																	            </tr>
																			</tbody>
																		</table>																																									
																		</div>	
																		<div th:id="${'campoTabla-cargos' + credito.nroCredito}" class="table-responsive" th:each="credito : ${listaCreditos}" style="display: none;">
																			<table id="tabla-cargos" class="table table-bordered table-hover table-fixed-header">
																			<thead>
																				<tr>
																					<th colspan="2">Concepto</th>
																					<th>Cargo</th>
																				</tr>																					
																			</thead>								
																			<tbody>
																				<tr th:each="cargo : ${credito.cargos}">
																					<td th:text="${cargo.codigoCargo}">55</td>
																					<td th:text="${cargo.descripcion}">descripcion cargo</td>
																					<td th:text="${#numbers.formatDecimal(cargo.saldoCargo, 2, 2, 'POINT')}">11.19</td>																						
																				</tr>
																				<tr th:if="${credito.cargos.isEmpty()}">
																	                <td colspan="5">No se encontraron registros de cargos</td>
																	            </tr>
																			</tbody>
																		</table>																																									
																		</div>
																	</div>
																	<div id="divTotales" class="col-xs-5" style="display: none;">						
																		<div class="col-xs-12">
																			<h3 class="header smaller green">
																				Totales
																			</h3>
																		</div>
																		<form class="form-horizontal" role="form">
																			<div class="form-group">
																			    <label for="showTotalIntereses" class="col-sm-2 control-label small center">Intereses</label>
																			    <div class="col-sm-4">
																			      <input type="text" readonly="readonly" class="col-sm-12 text-right" id="showTotalIntereses"/>
																			    </div>
																			    <label for="showTotalComision" class="col-sm-2 control-label small center">Comisi&oacute;n</label>
																			    <div class="col-sm-4">
																			      <input type="text" readonly="readonly" class="col-sm-12 text-right" id="showTotalComision"/>
																			    </div>																			    
																			</div>
																			<div class="form-group">
																			    <label for="showTotalPrincipal" class="col-sm-2 control-label small center">Principal</label>
																			    <div class="col-sm-4">
																			      <input type="text" readonly="readonly" class="col-sm-12 text-right" id="showTotalPrincipal"/>
																			    </div>
																			    <label for="showTotalPoliza" class="col-sm-2 control-label small center">P&oacute;liza</label>
																			    <div class="col-sm-4">
																			      <input type="text" readonly="readonly" class="col-sm-12 text-right" id="showTotalPoliza"/>
																			    </div>																			    
																			</div>
																			<div class="form-group">
																			    <label for="showTotalMora" class="col-sm-2 control-label small center">Moratorios</label>
																			    <div class="col-sm-4">
																			      <input type="text" readonly="readonly" class="col-sm-12 text-right" id="showTotalMora"/>
																			    </div>
																			    <label for="showTotalCargos" class="col-sm-2 control-label small center">Cargos</label>
																			    <div class="col-sm-4">
																			      <input type="text" readonly="readonly" class="col-sm-12 text-right" id="showTotalCargos"/>
																			    </div>																			    
																			</div>
																			<div class="form-group">
																			    <label for="showTotalAdeudado" class="col-sm-4 col-md-offset-4 control-label "><strong>Total Adeudado</strong></label>
																			    <div class="col-sm-4">
																			      <input type="text" readonly="readonly" class="col-sm-12 text-right" id="showTotalAdeudado"/>
																			    </div>																			    
																			</div>
																		</form>																																			
																	</div>																		
																	<div class="col-xs-12">
																		<hr/>
																		<form class="form-horizontal" role="form">
																			<div class="form-group">
																			    <label for="showInteresVencido" class="col-sm-1 control-label small center">Intereses Vencidos</label>
																			    <div class="col-sm-2">
																			      <input type="text" readonly="readonly" class="col-sm-12" id="showInteresVencido"/>
																			    </div>
																			    <label for="showInteresPospuesto" class="col-sm-1 control-label  small center">Inter&eacute;s Pospuesto</label>
																			    <div class="col-sm-2">
																			      <input type="text" readonly="readonly" class="col-sm-12" id="showInteresPospuesto"/>
																			    </div>
																			    <label for="showVencimientoMasAntigua" class="col-sm-1 control-label  small center">Venc. Cuota M&aacute;s Antigua</label>
																			    <div class="col-sm-2">
																			      <input type="text" readonly="readonly" class="col-sm-12" id="showVencimientoMasAntigua"/>
																			    </div>
																			    <label for="showNroCuotasVencidas" class="col-sm-1 control-label  small center">Cuotas Vencidas</label>
																			    <div class="col-sm-2">
																			      <input type="text" readonly="readonly" class="col-sm-12" id="showNroCuotasVencidas"/>
																			    </div>
																			</div>
																		</form>																																																					
																	</div>
																	<div class="col-xs-6">																		
																		<hr/>
																		<div class="well">
																			<h4 class="green smaller lighter">Tipos de Abono</h4>
																			<a href="#" th:href="@{/getPagoAbono}" class="btn" data-toggle="modal">
																				<i class="fa fa-check align-top bigger-125"></i>
																				Normal
																			</a>
																			<button class="btn btn-primary">
																				<i class="fa fa-eraser align-top bigger-125"></i>
																				Cancelaci&oacute;n
																			</button>
																			<button class="btn btn-success">
																				<i class="fa fa-forward align-top bigger-125"></i>
																				Adelanto de Cuota
																			</button>
																		</div>
																	</div>
																</div>
																
																<div id="modal-abonoNormal" class="modal" tabindex="-1" data-keyboard="false" data-backdrop="static">
																	<div class="space"></div>
																	<div class="space"></div>
																	<div class="modal-content col-md-6 col-md-offset-3" >
																		<div class="modal-header">
																			<button type="button" class="close" data-dismiss="modal">&times;</button>
																			<h4 class="blue bigger">Abonos</h4>
																		</div>
																
																		<div class="modal-body overflow-visible">
																			<div class="row">
																				<div class="col-xs-6">
																					<h5 class="smaller lighter">M&aacute;ximo a pagar</h5>
																						<div class="form-group">
																							<label class="col-sm-3 control-label no-padding-right small" for="hasta1"> Hasta </label>
																							<div class="col-sm-9">
																								<input type="text" id="hasta1" class="col-xs-10 small" readonly="readonly"/>
																							</div>
																						</div>
																						<div class="form-group">
																							<label class="col-sm-3 control-label no-padding-right small" for="hasta2"> Hasta </label>
																							<div class="col-sm-9">
																								<input type="text" id="hasta2" class="col-xs-10 small" readonly="readonly"/>
																							</div>
																						</div>
																						<div class="form-group">
																							<label class="col-sm-3 control-label no-padding-right small" for="hasta3"> Hasta </label>
																							<div class="col-sm-9">
																								<input type="text" id="hasta3" class="col-xs-10 small" readonly="readonly"/>
																							</div>
																						</div>
																						<div class="form-group">
																							<label class="col-sm-3 control-label no-padding-right small" for="hasta4"> Hasta </label>
																							<div class="col-sm-9">
																								<input type="text" id="hasta4" class="col-xs-10 small" readonly="readonly"/>
																							</div>
																						</div>
																						<div class="form-group">
																							<label class="col-sm-3 control-label no-padding-right small" for="hasta5"> Hasta </label>
																							<div class="col-sm-9">
																								<input type="text" id="hasta5" class="col-xs-10 small" readonly="readonly"/>
																							</div>
																						</div>
																						<div class="form-group">
																							<label class="col-sm-9 col-sm-offset-3 ">
																								<input class="ace" type="checkbox" id="chkCondonaMora">
																								<span class="lbl"> Condona Mora?</span>
																							</label>
																						</div>
																				</div>
																				<div class="col-xs-6">
																					<h5 class="smaller lighter">Abonos</h5>
																						<div class="form-group">
																							<label class="col-sm-3 control-label no-padding-right small" for="aCargos"> Cargos </label>
																							<div class="col-sm-9">
																								<input type="text" id="aCargos" class="col-xs-10 small" />
																							</div>
																						</div>
																						<div class="form-group">
																							<label class="col-sm-3 control-label no-padding-right small" for="aMoratorios"> Moratorios </label>
																							<div class="col-sm-9">
																								<input type="text" id="aMoratorios" class="col-xs-10 small" />
																							</div>
																						</div>
																						<div class="form-group">
																							<label class="col-sm-3 control-label no-padding-right small" for="aNormal"> Normal </label>
																							<div class="col-sm-9">
																								<input type="text" id="aNormal" class="col-xs-10 small" />
																							</div>
																						</div>
																						<div class="form-group">
																							<label class="col-sm-3 control-label no-padding-right small" for="aParcial"> Parcial </label>
																							<div class="col-sm-9">
																								<input type="text" id="aParcial" class="col-xs-10 small" />
																							</div>
																						</div>
																						<div class="form-group">
																							<label class="col-sm-3 control-label no-padding-right small" for="aExtraordinario"> Extraordinario </label>
																							<div class="col-sm-9">
																								<input type="text" id="aExtraordinario" class="col-xs-10 small"/>
																							</div>
																						</div>
																						<div class="form-group">
																							<label class="col-sm-3 control-label no-padding-right small" for="aPoliza"> P&oacute;liza </label>
																							<div class="col-sm-9">
																								<input type="text" id="aPoliza" class="col-xs-10 small" />
																							</div>
																						</div>
																						<div class="form-group">
																							<label class="col-sm-3 control-label no-padding-right small" for="aTotal"> Total Abonos </label>
																							<div class="col-sm-9">
																								<input type="text" id="aTotal" class="col-xs-10 small" readonly="readonly"/>
																							</div>
																						</div>
																				</div>																				
																				<div class="col-xs-12">
																					<hr/>
																					<h5 class="smaller lighter">Dep&oacute;sitos en cuentas del socio</h5>
																					<p>Tabla?</p>
																					<div class="col-xs-6">
																						<button type="button" class="btn btn-xs btn-purple">
																							<i class="fa fa-search"></i>
																							Consultar Aportaciones
																						</button>
																					</div>
																					<div class="col-xs-6">
																						<div class="form-group">
																							<label class="col-sm-4 control-label no-padding-right small" for="aTotalDepositosSocio"> Total dep&oacute;sitos </label>
																							<div class="col-sm-8">
																								<input type="text" id="aTotalDepositosSocio" class="col-xs-10 small" readonly="readonly"/>
																							</div>
																						</div>
																					</div>
																				</div>
																				<div class="col-xs-12">
																					<hr/>
																					<h5 class="smaller lighter">Dep&oacute;sitos en cuentas de la cooperativa</h5>
																					<p>Tabla?</p>
																					<div class="col-xs-6 col-xs-offset-6">
																						<div class="form-group">
																							<label class="col-sm-4 control-label no-padding-right small" for="aTotalDepositosSocio"> Total dep&oacute;sitos </label>
																							<div class="col-sm-8">
																								<input type="text" id="aTotalDepositosSocio" class="col-xs-10 small" readonly="readonly"/>
																							</div>
																						</div>
																					</div>
																				</div>
																				<div class="col-xs-12">
																					<hr/>
																					<div class="form-group">
																						<label class="col-sm-8 control-label no-padding-right" for="aTotalDepositosSocio"> DI_TOTAL </label>
																						<div class="col-sm-4">
																							<input type="text" id="aTotalDepositosSocio" class="col-xs-10" readonly="readonly"/>
																						</div>
																					</div>
																				</div>
																				<div class="col-xs-12">
																					<hr/>
																					<div class="form-group">
																						<label class="col-sm-4 control-label no-padding-right" for="aTotalDepositosSocio"> Tipo cobro </label>
																						<div class="col-sm-8">
																							<input type="text" id="aTotalDepositosSocio" class="col-xs-11" />
																						</div>
																					</div>
																					<div class="form-group">
																						<label class="col-sm-4 control-label no-padding-right" for="aTotalDepositosSocio"> Banco </label>
																						<div class="col-sm-8">
																							<input type="text" id="aTotalDepositosSocio" class="col-xs-11" />
																						</div>
																					</div>
																				</div>
																				<div class="col-xs-12">
																					<hr/>
																					<div class="form-group">
																						<label class="col-sm-8 control-label no-padding-right" for="aTotalDepositosSocio"> DI_RECIBE </label>
																						<div class="col-sm-4">
																							<input type="text" id="aTotalDepositosSocio" class="col-xs-10" readonly="readonly"/>
																						</div>
																					</div>
																				</div>
																				<div class="col-xs-12">
																					<hr/>
																					<div class="form-group">
																						<label class="col-sm-8 control-label no-padding-right" for="aTotalDepositosSocio"> Vuelto </label>
																						<div class="col-sm-4">
																							<input type="text" id="aTotalDepositosSocio" class="col-xs-10" readonly="readonly"/>
																						</div>
																					</div>
																				</div>
																					
																				
																			</div>
																		</div>
																
																		<div class="modal-footer">																			
																			<button type="button" id="btnAgregarDestino" class="btn btn-sm btn-primary">
																				<i class="fa fa-check"></i>
																				Agregar
																			</button>
																			
																			<button class="btn btn-sm" data-dismiss="modal">
																				<i class="fa fa-times"></i>
																				Cancelar
																			</button>																			
																		</div>
																	</div>
																</div><!-- fin modal -->
															</div> <!-- fin bloque pagos body main-->
														</div> <!-- fin bloque pagos body -->

</body>
</html>